<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Float & Clear</title>
    <style>
        .cards{
            border: 2px solid black;
            display: flow-root;
        }
        
        img{
            float:left;
        }

        .card{
            border: 2px solid red;
        }

        .card:nth-child(3){
            background-color: aqua;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="cards">
        <img src="https://media.istockphoto.com/id/928826678/photo/two-men-relaxing-and-fishing.jpg?s=2048x2048&w=is&k=20&c=fSG5LG9kxLNzjG9_YI1bXdz3-gD7UW2e2bd9arD5Vm8=" alt="" width="230">
        <div class="card">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi fugiat ab tenetur praesentium sequi, nisi nesciunt officiis magnam ut at voluptatibus sapiente ducimus deleniti esse alias nihil. Soluta iure ipsum voluptatibus assumenda ratione ut?</p>
        </div>
        <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore explicabo dignissimos a et sapiente sunt assumenda cupiditate veniam cumque ipsa? Autem quod, id itaque velit cupiditate ea quia sit laudantium asperiores. Culpa fuga libero odio consequatur et totam ratione tempore eos ipsum, soluta omnis, fugiat facere? Quam neque a pariatur debitis quos vero maiores, porro, voluptatum earum corporis deserunt dolore ipsa! Explicabo ea ipsum possimus fugiat accusantium, incidunt ducimus. Assumenda nulla beatae dolores, recusandae voluptates non dolorem ut, obcaecati minus ducimus officiis in impedit. Quas cupiditate totam quis. Tempora praesentium similique cumque dolores ipsa commodi nobis itaque vero, est fugiat, accusantium maiores quos beatae quaerat quibusdam officia corrupti. Quaerat eaque magni error fugit nihil. Asperiores libero minus velit assumenda quo repellendus doloribus officia unde facere commodi a ab porro, repudiandae quidem! Officia, earum. Aliquam, id? Praesentium temporibus distinctio architecto asperiores consequatur provident reiciendis corrupti, nostrum nam hic voluptatem minima. Cum assumenda iste iusto. Adipisci quaerat labore suscipit minus libero ratione quidem recusandae neque. Eveniet amet animi quas quod facilis dicta, fugiat praesentium laborum, a delectus culpa cumque. Fugiat alias suscipit nostrum repellat nesciunt repudiandae enim provident iste a quo? Facere reiciendis ut illo quis blanditiis ipsa tempora, eos cupiditate corrupti ex alias laboriosam velit impedit eveniet asperiores sunt aperiam maxime earum explicabo? Modi cupiditate voluptatibus perspiciatis consequuntur quis, aut commodi, error libero, expedita debitis accusamus rem illo mollitia! Natus, repellat velit enim quaerat eius voluptate odio adipisci fuga accusantium officiis quidem perferendis qui fugiat amet! Nulla quisquam praesentium omnis excepturi officiis, quasi similique vero, unde, quos quo aperiam numquam! Dolorem, ea. Dignissimos blanditiis, quia quibusdam deserunt doloribus tempora perferendis pariatur dolore itaque voluptates mollitia fugiat deleniti tempore commodi. Doloribus facilis molestiae repellat possimus eligendi voluptatibus hic quos maiores architecto magni enim fugit, reiciendis, adipisci esse, illo exercitationem assumenda id? Laboriosam, temporibus odit? Facere ratione repellendus laudantium laborum incidunt voluptatibus explicabo deleniti iusto dolorum nisi dicta fugiat saepe qui molestias commodi non dolor aperiam unde provident optio, enim omnis quidem. Nulla molestias officia numquam.</div>
        <div class="card">Card 3</div>
    </div>
</body>
</html>